<template>
  <div class="page-main">
    
    <div class="page-menu">
      <template v-for="item in menuList" :key="item.key">
        <p :class="['menu-item',menuOPT.checked===item.key?'menu-checked':'']" @click="changePage(item)">{{item.label}}</p>
      </template>
    </div>

    <div class="page-body">
      <!-- <keep-alive> -->
        <component :is="checkedComponent" :key="menuOPT.checked"></component>
      <!-- </keep-alive> -->
    </div>

  </div>
</template>

<script>
  export default {
    name: 'messageDetail',
  }
</script>
<script setup>
import { reactive,defineAsyncComponent, computed,watch} from 'vue'
import {useRouter } from "vue-router";
const Detail = defineAsyncComponent(() =>import('./detail.vue'))
const Target = defineAsyncComponent(() =>import('./target.vue'))
const Statistics = defineAsyncComponent(() =>import('./statistics.vue'))

const router = useRouter();

const query = router.currentRoute.value.query;
const menuOPT = reactive({
  checked: query.view || "detail",
})

watch(()=>router.currentRoute.value.query,(n,o)=>{
  menuOPT.checked = n.view || "detail";
})

const menuList = computed(()=>{
  let query = router.currentRoute.value.query;
  return query.statistics==='show'?[
    {key:"detail",label:"消息详情"},
    {key:"target",label:"推送对象"},
    {key:"statistics",label:"数据统计"},
  ]:[
    {key:"detail",label:"消息详情"},
    {key:"target",label:"推送对象"},
  ]
})


let checkedComponent = computed(()=>{
  return {
    "detail":Detail,
    "target":Target,
    "statistics":Statistics,
  }[menuOPT.checked];
})

function changePage(item){
  const path = router.currentRoute.value.path;
  const statistics = router.currentRoute.value.query.statistics
  router.push(`${path}?view=${item.key}&statistics=${statistics||'hide'}`)
}

</script>

<style scoped lang="scss">
@import "@/styles/tablePage.scss";
.page-body{
  // background-color: #ffffff;
  border-radius: 8px;
  // padding: 8px;
  margin-top: 8px;
}
</style>